import { Form, Input, Button, Checkbox, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './style.css'
import { login } from '../../api'
import debounce from '../../utils/debounce'
import { useHistory } from 'react-router';

const NormalLoginForm = () => {
  const history = useHistory()
  // 函数防抖
  const onFinish = debounce(async (values) => {
    const resp = await login(values)
    const { code, mess, token } = resp.data
    if(code  === 200 ){
      message.success(mess)
      localStorage.setItem('token', token)
      history.push({ pathname: '/home/list' })
    } else {
      message.error(mess)
    }
  })

  return (
    <Form
      name="normal_login"
      className="login-form"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
    >
      <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your Username!',
          },
        ]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: 'Please input your Password!',
          },
        ]}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="Password"
        />
      </Form.Item>
     

      <Form.Item>
        <Button type="primary" htmlType="submit" className="login-form-button" style={{ width: "100%" } }>
          Log in
        </Button>
      </Form.Item>
    </Form>
  );
};


export default  NormalLoginForm